<template>
    <div class="tag-box">
        <el-tag @close="handelClose(tag,index)" :closable="tag.name !=='home'" @click="changeMenu(tag)" 
        :effect="$route.name==tag.name ? 'dark' : 'plain'" v-for="(tag,index) in tags" :key="index" class="tags" >{{ tag.label }}</el-tag>
    </div>

</template>

<script setup>
// 引入仓库
import { useAside } from '../store/index.js'
const main = useAside()
import { useRouter,useRoute } from 'vue-router';
const route=useRoute()
const router= useRouter()

// 点击跳转
const changeMenu =(item)=>{
    main.selectMenu(item)
    router.push(
        {name:item.name}
    )
}
// 关闭tag标签
const handelCloseTag =(val)=>{
    main.closeTag(val)
}
const handelClose =(tag,index)=>{
    const length=tags.length-1
    handelCloseTag(tag)
    if( tag.name !== route.name ){
        return
    }
    if(index===length){
        router.push(
            {
                name:tags[index-1].name
            }
        )
    }else{
        router.push(
            {
                name:tags[index].name
            }
        )
    }
}



const tags=main.tabList


</script>

<style lang="less">
.tag-box {
    margin-bottom: 18px;
    .tags{
        margin-right: 10px;
        cursor: pointer;
    }
}
</style>